<template>
  <section>
    <div class="irs-sel" v-if="EditMode">
      <el-select
        v-model="supplyorgname"
        placeholder="请选择IRS部门"
        @change="getIrsData"
        filterable
        class="select-item"
      >
        <el-option
          :label="item"
          :value="item"
          v-for="(item, index) in supList"
          :key="index"
        ></el-option>
      </el-select>
      <el-select
        v-model="irsCatalogId"
        placeholder="请选择IRS"
        class="select-item"
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="(item, index) in irsList"
          :key="index"
          filterable
        ></el-option>
      </el-select>
    </div>
    <div class="affiliation-app edit-model" v-else>
      <div class="text" :title="isrName">{{ isrName }}</div>
      <el-button type="primary" class="new-btn" @click="handleEdit"
        >修改</el-button
      >
    </div>
  </section>
</template>

<script setup>
import { getIrsSupList, getIrsList, getIrsById } from "@/api/service.js";
import { ref, onMounted, computed, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
// console.log(route.path);
const url =  location.href.toLowerCase();
const isAdd = ref(url.indexOf("add") > 0);
const EditMode = ref(isAdd);

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const irsCatalogId = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    // imgUrl改变时触发修改父组件绑定的v-model的值
    emit("update:modelValue", val);
  },
});

const supList = ref([]);
const irsList = ref([]);
const supplyorgname = ref("");
const isrName = ref("");

const handleEdit = () => {
  EditMode.value = !EditMode.value;
  irsCatalogId.value = "";
};
const initData = async () => {
  let { data } = await getIrsSupList();
  supList.value = data.map((it) => it?.supplyorgname);
};

// 获取IRS名称;
const getIrsData = async (name) => {
  irsCatalogId.value = "";
  let { data } = await getIrsList({ supplyorgname: name });
  irsList.value = data.map((it) => {
    return {
      id: it.id + "",
      name: it.name,
    };
  });
};
watch(irsCatalogId, (value) => {
  setTimeout(() => {
    findIrsName(value);
  }, 500);
});

// 查找名称
const findIrsName = async (id) => {
  isrName.value = "";
  if (id) {
    let { data } = await getIrsById(id);
    isrName.value = data.name || "";
  }
};

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.irs-sel {
  display: flex;
  .select-item {
    margin-right: 10px;
  }
}
.edit-model {
  .text {
    width: 260px;
    overflow: hidden;
    white-space: nowrap; //不换行
    text-overflow: ellipsis; //超出部分省略号
    float: left;
  }
}
</style>
